<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.appName"
        placeholder="名称"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <!-- <el-select
        v-model="listQuery.productType"
        clearable
        placeholder="产品类型"
        style="width: 200px;"
        class="filter-item"
      >
        <el-option :value="0" label="全部">全部</el-option>
        <el-option :value="1" label="API助贷">API助贷</el-option>
        <el-option :value="2" label="联登产品">联登产品</el-option>
        <el-option :value="3" label="H5贷超">H5贷超</el-option>
      </el-select> -->
      <el-select
        v-model="listQuery.state"
        clearable
        placeholder="上下架"
        style="width: 200px;"
        class="filter-item"
      >
        <!-- <el-option :value="0" label="全部">全部</el-option> -->
        <el-option :value="0" label="下架">下架</el-option>
        <el-option :value="1" label="上架">上架</el-option>
        <el-option :value="2" label="全部">全部</el-option>
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        新增
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="warning"
        icon="el-icon-thumb"
        @click="dialogSort = true;rowDrop()"
      >
        排序
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :row-class-name="tableRowClassName"
    >
      <el-table-column label="编号" prop="id" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="产品类型" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span v-if="row.newProductType===1">API助贷</span>
          <span v-if="row.newProductType===2">联登产品</span>
          <span v-if="row.newProductType===3">H5贷超</span>
        </template>
      </el-table-column> -->
      <el-table-column label="应用图标" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <!-- {{ row.icon }} -->
          <img :src="row.icon" alt="" style="width: 26px;height:26px" />
        </template>
      </el-table-column>
      <el-table-column label="应用名称" class-name="status-col" width="200">
        <template slot-scope="{ row }">
          {{ row.appName }}
          <span v-if="row.fakeName !== null"> ( {{ row.fakeName }} ) </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="H5地址" min-width="100" align="center" :formatter="h5Formatter">
        <template slot-scope="{row}">
          <span>{{ row.h5==null?'':row.h5 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="关键字" width="180" align="center">
        <template slot-scope="{row}">
          <span>{{ row.slogen }}</span>
        </template>
      </el-table-column>
      <el-table-column label="推荐语" width="230" align="center">
        <template slot-scope="{row}">
          <span>{{ row.recommand }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="借款范围" width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.loanMin > 10000 ? row.loanMin/10000 + '万':row.loanMin }}--{{ row.loanMax > 10000 ? row.loanMax/10000 + '万':row.loanMax }}</span>
        </template>
      </el-table-column>
      <el-table-column label="借款期限" width="80" align="center">
        <template slot-scope="{row}">
          <span>{{ row.periodsMin }}--{{ row.periodsMax }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="日利率" width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.rate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80" align="center">
        <template slot-scope="{ row }">
          <el-tag v-if="row.state === 0" type="info">禁用</el-tag>
          <el-tag v-if="row.state === 1" type="success">启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="单价" width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="访问限制数" width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.queryLimit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户访问量" width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.all }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户唯一访问量" width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.unique }}</span>
        </template>
      </el-table-column>
      <el-table-column label="定时上下线" width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.timingSwitch }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="不限制访问"
        align="center"
        min-width="120"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.limitSwitch"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            style="width:100%;margin-top:10px"
            @change="changeVisitStatus(row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="申请状态"
        align="center"
        min-width="120"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.enableSwitch"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            style="width:100%;margin-top:10px"
            @change="changeStatus(row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="贷款详情页"
        align="center"
        min-width="120"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.pageSwitch"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            style="width:100%;margin-top:10px"
            @change="changePageSwitch(row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="联登开关"
        align="center"
        min-width="120"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.unSwitch"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            style="width:100%;margin-top:10px"
            @change="changeUNSwitch(row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="260"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button
            v-if="row.state === 1"
            type="danger"
            size="mini"
            @click="updateState(row)"
          >
            禁用
          </el-button>
          <el-button
            v-if="row.state === 0"
            type="success"
            size="mini"
            @click="updateState(row)"
          >
            启用
          </el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button type="warning" size="mini" @click="deleteLoan(row)">
            删除
          </el-button>
          <el-dialog
            title="确认删除吗？"
            :visible.sync="deleteDialogVisible"
            width="20%"
            :before-close="handleClose"
          >
            <span style="color:red">删除后无法恢复，请谨慎操作！</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="deleteDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="handleDelete">确 认</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="loanList"
    />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="loan"
        label-position="left"
        label-width="90px"
        style="width: 470px; margin-left:50px;"
      >
        <el-input v-model="loan.id" type="hidden" />

        <el-form-item label="App名称" prop="appName">
          <el-input v-model="loan.appName" />
        </el-form-item>
        <el-form-item label="非会员App名称">
          <el-input v-model="loan.fakeName" />
        </el-form-item>
        <el-form-item label="联登开关" prop="unSwitch">
          <el-radio-group v-model="loan.unSwitch">
            <el-radio :label="1">
              开启
            </el-radio>
            <el-radio :label="0">
              关闭
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="h5链接" prop="h5">
          <el-input v-model="loan.h5" />
        </el-form-item>
        <el-form-item label="app下载地址">
          <el-input v-model="loan.appDownload" />
        </el-form-item>
        <el-form-item label="图标">
          <el-upload
            ref="upload"
            :action="action"
            :limit="limitNum"
            :auto-upload="true"
            :before-upload="beforeUploadFile"
            :on-exceed="exceedFile"
            :on-success="handleSuccess"
            :on-error="handleError"
            :file-list="fileList"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="loan.slogen" />
        </el-form-item>
        <el-form-item label="推荐语">
          <el-input v-model="loan.recommand" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item label="日利率">
          <el-input v-model="loan.rate" />
        </el-form-item>
        <el-form-item label="申请人数">
          <el-input
            v-model="loan.applyCount"
            oninput="value=value.replace(/[^\d]/g,'')"
            maxlength="10"
          />
        </el-form-item>
        <el-form-item label="最小可贷" prop="loanMin">
          <el-input v-model="loan.loanMin" />
        </el-form-item>
        <el-form-item label="最大可贷" prop="loanMax">
          <el-input v-model="loan.loanMax" />
        </el-form-item>
        <el-form-item label="最小期数" prop="periodsMin">
          <el-input v-model="loan.periodsMin" />
        </el-form-item>
        <el-form-item label="最大期数" prop="periodsMax">
          <el-input v-model="loan.periodsMax" />
        </el-form-item>
        <el-form-item label="单价" prop="periodsMax">
          <el-input v-model="loan.price" />
        </el-form-item>
        <el-form-item label="充值金额" prop="periodsMax">
          <el-input v-model="loan.money" />
        </el-form-item>
        <el-form-item label="定时上下线" prop="periodsMax">
          <el-time-picker
            v-model="clockRangeTime.startTime"
            value-format="HH:mm"
            start-placeholder="开始时间"
            placeholder="开始时间"
            style="width: 180px;"
          />
          --
          <el-time-picker
            style="width: 180px;"
            v-model="clockRangeTime.endTime"
            value-format="HH:mm"
            end-placeholder="结束时间"
            placeholder="结束时间"
          />
        </el-form-item>
        <!-- <el-form-item label="定时上下线" prop="periodsMax">
          <el-input v-model="loan.timingSwitch" placeholder="HH:mm-HH:mm" />
        </el-form-item> -->
        <el-form-item label="访问限制数" prop="queryLimit">
          <el-input-number
            style="width: 310px;"
            v-model="loan.queryLimit"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
        <p style="font-size: 16px;font-weight: 600;margin-top: 49px;">
          贷款详情页配置
          <!-- <el-switch
            v-model="detailPageSwitch"
            active-text="开"
            inactive-text="关"
            active-color="#13ce66"
            inactive-color="#ff4949"
            style="width:100%;margin-top:10px"
          /> -->
        </p>
        <div>
          <el-form-item label="借多少">
            <el-input v-model="loan.loanDefault" />
          </el-form-item>
          <el-form-item label="借多久">
            <el-input v-model="loan.periodsDefault" />
          </el-form-item>
          <el-form-item label="预估利息">
            <el-input v-model="loan.interestDefault" />
          </el-form-item>
          <el-form-item label="月均还款">
            <el-input v-model="loan.monthRepay" />
          </el-form-item>
          <el-form-item label="年利率">
            <el-input v-model="loan.annualRate" style="width:90%;" /><span
              style="padding-left:5px;"
              >%</span
            ></el-form-item
          >
          <el-form-item label="附加文案1">
            <textarea v-model="loan.remarkA" style="width:100%;height:90px;" />
          </el-form-item>
          <el-form-item label="附加文案2">
            <textarea v-model="loan.remarkB" style="width:100%;height:90px;" />
          </el-form-item>
          <el-form-item label="申请条件">
            <textarea
              v-model="loan.conditionInfo"
              style="width:100%;height:90px;"
            />
          </el-form-item>
          <el-form-item label="机构信息">
            <textarea v-model="loan.unitInfo" style="width:100%;height:90px;" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >
          确认
        </el-button>
      </div>
    </el-dialog>

    <!-- 排序 -->
    <el-dialog title="排序" :visible.sync="dialogSort" :close-on-click-modal="false">
      <div class="draggable">
        <el-table :data="dialogSortData" row-key="id" border>
          <el-table-column property="sort" label="排序"></el-table-column>
          <el-table-column property="apiId" label="apiId"></el-table-column>
          <el-table-column property="apiName" label="名字"></el-table-column>
        </el-table>
      </div>
      
    </el-dialog>
  </div>
</template>

<script>
import {
  addloan,
  deleteById,
  editloan,
  editloanSwitch,
  loanList,
  getApiSort,
  updateSortList
} from '@/api/sys';
import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
import Sortable from 'sortablejs';
export default {
  name: 'Sysloanlist',
  components: { Pagination },
  directives: { waves },
  data() {
    var checkhttp = (rule, value, callback) => {
      var reg = /^http:\/\//;
      var regs = /^https:\/\//;
      if (reg.test(value)) {
        callback();
      } else {
        if (!regs.test(value)) {
          callback(new Error('需要https://开头'));
        } else {
          callback();
        }
      }
    };
    return {
      detailPageSwitch: false,
      action:
        process.env.VUE_APP_BASE_API.split('/')[0] +
        '//' +
        process.env.VUE_APP_BASE_API.split('/')[2] +
        '/api/foundation/api/file/upload',
      clockTime: '',
      clockRangeTime: {
        startTime: '',
        endTime: ''
      },
      limitNum: 1,
      fileList: [],
      comment: '',
      tableData: [],
      total: 0,
      tableKey: 0,
      listQuery: {
        productType: '',
        current: 1,
        size: 10,
        state: 2
      },
      loan: {
        id: undefined,
        appName: new Date(),
        unSwitch: '',
        h5: '',
        slogen: '',
        applyCount: '',
        loanDefault: 200000,
        periodsDefault: 12,
        interestDefault: 180000,
        monthRepay: 56666,
        annualRate: 36,
        remarkA: 'xxx是一款消费贷款产品，持牌和银行机构放款，资金安全合规',
        remarkB: '操作简单，快速借',
        conditionInfo: '身份信息认证，银行卡认证，年龄23周岁以上',
        unitInfo: '公司主体：xxx科技公司 客服电话：暂无电话'
      },
      loanSwich: {
        id: '',
        status: '',
        url: ''
      },
      deleteId: '',
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      dialogPvVisible: false,
      deleteDialogVisible: false,
      pvData: [],
      rules: {
        appName: [{ required: true, message: '名称必填', trigger: 'blur' }],
        h5: [{ required: true, message: 'h5地址必填', trigger: 'blur' }],
        timestamp: [
          {
            type: 'date',
            required: true,
            message: 'timestamp is required',
            trigger: 'change'
          }
        ],
        icon: [
          { required: true, message: '图标必填', trigger: 'blur' },
          { validator: checkhttp, trigger: 'blur' }
        ],
        applyCount: [{ required: true, message: 'h5地址必填', trigger: 'blur' }]
      },
      downloadLoading: false,
      listLoading: false,
      imageUrl: '',
      applicationStatus: true,
      limitButton: false,
      dialogSort: false,
      dialogSortData: []
    };
  },
  components: {
  },
  created() {
    this.loanList();
  },
  mounted(){
    
  },
  methods: {
    tableRowClassName({ row }) {
      if (row.unique >= row.queryLimit * 0.75) {
        return 'borderRed';
      }
      return '';
    },
    changeVisitStatus(row) {
      this.loan = row;
      // 贷款详情页开关0-关，1-开
      if (this.loan.limitSwitch) {
        this.loan.limitButton = 1;
      } else {
        this.loan.limitButton = 0;
      }
      editloan(this.loan).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '更新成功',
            type: 'success',
            duration: 2000
          });
          this.loanList(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: '更新失败',
            type: 'fail',
            duration: 2000
          });
        }
        this.dialogFormVisible = false;
      });
    },
    changeStatus(row) {
      this.loan = row;
      // 贷款详情页开关0-关，1-开
      if (this.loan.enableSwitch) {
        this.loan.applicationStatus = 1;
      } else {
        this.loan.applicationStatus = 0;
      }
      editloan(this.loan).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '更新成功',
            type: 'success',
            duration: 2000
          });
          this.loanList(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: '更新失败',
            type: 'fail',
            duration: 2000
          });
        }
        this.dialogFormVisible = false;
      });
    },
    changePageSwitch(row) {
      this.loan = row;
      // 贷款详情页开关0-关，1-开
      if (this.loan.pageSwitch) {
        this.loan.detailPageSwitch = 1;
      } else {
        this.loan.detailPageSwitch = 0;
      }
      editloan(this.loan).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '更新成功',
            type: 'success',
            duration: 2000
          });
          this.loanList(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: '更新失败',
            type: 'fail',
            duration: 2000
          });
        }
        this.dialogFormVisible = false;
      });
    },
    changeUNSwitch(row) {
      // 开关0-关，1-开
      this.loanSwich.id = row.id;
      this.loanSwich.status = row.unSwitch;
      if (row.unSwitch === 0) {
        this.$prompt('请输入H5链接', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(({ value }) => {
            this.loanSwich.url = value;
            this.changeLoanSwich();
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
            this.loanList(this.listQuery);
          });
      } else {
        this.changeLoanSwich();
      }
    },
    changeLoanSwich() {
      editloanSwitch(this.loanSwich).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: '更新成功',
            type: 'success',
            duration: 2000
          });
          this.loanList(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: '更新失败',
            type: 'fail',
            duration: 2000
          });
          this.loanList(this.listQuery);
        }
        this.dialogFormVisible = false;
      });
    },
    h5Formatter(row, col) {
      // console.log(row.h5)
      return row.h5.size;
    },
    beforeUploadFile(file) {
      // console.log(file)
      // const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      // if (extension !== 'apk') {
      //   this.$notify.warning({
      //     title: '警告',
      //     message: `只能上传apk文件`
      //   })
      // }
    },
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$notify.warning({
        title: '警告',
        message: `只能选择 ${
          this.limitNum
        } 个文件，当前共选择了 ${files.length + fileList.length} 个`
      });
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      this.loan.icon = res.data; // 服务器返回的文件地址
      this.fileList[0] = file;
      this.imageUrl = res.data;
      this.$message({
        message: '文件上传成功',
        type: 'success'
      });
      this.$refs.upload.clearFiles(); // 清楚上次上传记录
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      this.$message.error(err.msg);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 获取列表
    async loanList(listQuery) {
      const res = await loanList(this.listQuery);
      res.data.data.records.forEach(element => {
        element.pageSwitch = element.detailPageSwitch === 1;
        element.enableSwitch = element.applicationStatus === 1;
        element.limitSwitch = element.limitButton === 1;
      });
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    handleFilter() {
      this.listQuery.current = 1;
      this.loanList(this.listQuery);
    },
    cancel() {
      this.dialogFormVisible = false;
      this.loanList();
    },
    resetTemp() {
      this.loan = {
        id: undefined,
        appName: '',
        h5: '',
        slogen: '',
        applyCount: '',
        loanDefault: 200000,
        periodsDefault: 12,
        interestDefault: 180000,
        monthRepay: 56666,
        annualRate: 36,
        remarkA: 'xxx是一款消费贷款产品，持牌和银行机构放款，资金安全合规',
        remarkB: '操作简单，快速借',
        conditionInfo: '身份信息认证，银行卡认证，年龄23周岁以上',
        unitInfo: '公司主体：xxx科技公司 客服电话：暂无电话'
      };
      this.clockRangeTime.startTime = '';
      this.clockRangeTime.endTime = '';
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = 'create';
      this.dialogFormVisible = true;
      // 刷新表单数据验证提示
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate();
      });
    },
    createData() {
      const that = this;
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          if (that.detailPageSwitch) {
            this.loan.detailPageSwitch = 1;
          } else {
            this.loan.detailPageSwitch = 0;
          }
          if (!this.clockRangeTime.startTime || !this.clockRangeTime.endTime) {
            this.loan.timingSwitch = '';
          } else {
            this.loan.timingSwitch =
              this.clockRangeTime.startTime + '-' + this.clockRangeTime.endTime;
          }
          addloan(this.loan).then(res => {
            if (res.data.code === 200) {
              that.$notify({
                title: 'Success',
                message: 'Update Successfully',
                type: 'success',
                duration: 2000
              });
              that.loanList(that.listQuery);
            } else {
              this.$notify({
                title: 'fail',
                message: res.data.msg,
                type: 'fail',
                duration: 2000
              });
            }
            this.dialogFormVisible = false;
          });
        }
      });
    },
    async handleUpdate(row) {
      this.detailPageSwitch = row.detailPageSwitch === 1;
      this.loan = row;
      this.imageUrl = row.icon;
      // this.clockTime = row.timingSwitch;
      if (row.timingSwitch) {
        const time = row.timingSwitch.split('-');
        this.clockRangeTime.startTime = time[0];
        this.clockRangeTime.endTime = time[1];
      } else {
        this.clockRangeTime.startTime = '';
        this.clockRangeTime.endTime = '';
      }
      if (this.loan.easeOfMoney === 1) {
        this.loan.easeOfMoney = true;
      } else {
        this.loan.easeOfMoney = false;
      }
      if (this.loan.easilyThrough === 1) {
        this.loan.easilyThrough = true;
      } else {
        this.loan.easilyThrough = false;
      }
      if (this.loan.lendingFast === 1) {
        this.loan.lendingFast = true;
      } else {
        this.loan.lendingFast = false;
      }
      // if ((this.loan.loanMin + '').indexOf('万') !== -1) {
      //   this.loan.loanMin = this.loan.loanMin.substring(0, (this.loan.loanMin + '').indexOf('万')) * 10000
      // }
      // if ((this.loan.loanMax + '').indexOf('万') !== -1) {
      //   this.loan.loanMax = this.loan.loanMax.substring(0, (this.loan.loanMax + '').indexOf('万')) * 10000
      // }
      this.dialogStatus = 'update';
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate();
      });
    },
    updateData() {
      const that = this;
      console.log(this.clockTime);
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          // 贷款详情页开关0-关，1-开
          if (that.detailPageSwitch) {
            this.loan.detailPageSwitch = 1;
          } else {
            this.loan.detailPageSwitch = 0;
          }
          if (that.applicationStatus) {
            this.loan.applicationStatus = 1;
          } else {
            this.loan.applicationStatus = 0;
          }
          if (this.loan.easeOfMoney === true) {
            this.loan.easeOfMoney = 1;
          } else {
            this.loan.easeOfMoney = null;
          }
          if (this.loan.easilyThrough === true) {
            this.loan.easilyThrough = 1;
          } else {
            this.loan.easilyThrough = null;
          }
          if (this.loan.lendingFast === true) {
            this.loan.lendingFast = 1;
          } else {
            this.loan.lendingFast = null;
          }
          if (this.loan.queryLimit === '') {
            this.loan.queryLimit = null;
          }
          if (!this.clockRangeTime.startTime || !this.clockRangeTime.endTime) {
            this.loan.timingSwitch = '';
          } else {
            this.loan.timingSwitch =
              this.clockRangeTime.startTime + '-' + this.clockRangeTime.endTime;
          }
          console.log(this.loan.timingSwitch);
          editloan(this.loan).then(res => {
            if (res.data.code === 200) {
              that.$notify({
                title: 'Success',
                message: 'Update Successfully',
                type: 'success',
                duration: 2000
              });
              that.loanList(that.listQuery);
            } else {
              that.$notify({
                title: 'fail',
                message: res.data.msg,
                type: 'fail',
                duration: 2000
              });
            }
            this.dialogFormVisible = false;
          });
        }
      });
    },
    deleteLoan(row) {
      this.deleteDialogVisible = true;
      this.deleteId = row.id;
    },
    handleDelete() {
      deleteById({ id: this.deleteId }).then(res => {
        if (res.data.code === 200) {
          this.loanList();
          this.$notify({
            title: 'Success',
            message: 'Delete Successfully',
            type: 'success',
            duration: 2000
          });
        } else {
          this.$notify({
            title: 'fail',
            message: 'Delete fail',
            type: 'fail',
            duration: 2000
          });
        }
      });
      this.deleteDialogVisible = false;
    },
    updateState(row) {
      if (row.state === 0) {
        row.state = 1;
      } else {
        row.state = 0;
      }
      editloan(row).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: 'Update Successfully',
            type: 'success',
            duration: 2000
          });
          this.loanList(this.listQuery);
        } else {
          this.$notify({
            title: 'fail',
            message: 'Update fail',
            type: 'fail',
            duration: 2000
          });
        }
        this.dialogFormVisible = false;
      });
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? 'ascending' : 'descending';
    },
    rowDrop(){
      getApiSort().then( res => {
        if( res.data.code == '200' ){
          this.dialogSortData = res.data.data

          if( res.data.data.length > 1 ){
            setTimeout( () => {
              const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody')
              const _this = this
              Sortable.create(tbody,{
                draggable: '.draggable .el-table__row',
                onEnd(ev){
                  _this.dialogSortData.splice(ev.newIndex,0,_this.dialogSortData.splice(ev.oldIndex,1)[0])
                  let newArr = _this.dialogSortData.slice(0)
                  _this.dialogSortData = []

                  _this.$nextTick( () => {
                    _this.dialogSortData = newArr;
                    let newList= []
                    _this.dialogSortData.forEach( (item,index) => {
                      newList.push({
                        apiId: item.apiId,
                        sort: index+1
                      })
                    })

                    updateSortList(newList).then( res => {
                    if( res.data.code == '200' ){
                      _this.$notify({
                          title: 'Success',
                          message: 'Sort Successfully',
                          type: 'success',
                          duration: 2000
                        });
                        _this.handleFilter()
                      } else {
                        _this.$notify({
                          title: 'fail',
                          message: 'Update fail',
                          type: 'fail',
                          duration: 2000
                        });
                      }
                    })
                  }) 
                }
              })
            },1000)
          }
        }
      }) 
    }
  }
};
</script>

<style scoped>
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}
.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(172, 176, 177);
}
.title {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box {
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick {
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
>>> .borderRed {
  /* background-color: #fca0a0; */
  color: red;
}

.draggable >>>.el-table__row:hover {
  cursor: row-resize;
}
</style>
